<template>
    <div class="workbench">
        <!-- <navTitleVue></navTitleVue> -->
        <div class="workTop">
            <div class="workLeft">
                <div class="statist">
                    <el-statistic title="工作台" :value="107" v-for="o in 10" :key="o" />
                </div>
                <div class="word-card">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span style="font-weight: 700;font-size:20px;">快捷申请</span>
                                <el-button class="button" text>更多</el-button>
                            </div>
                        </template>
                        <div v-for="o in 8" :key="o" class="text item item-text">
                            <div class="items">
                                <div class="icon">
                                    <el-icon size="25">
                                        <Document />
                                    </el-icon>
                                </div>
                                <div class="text">
                                    请假申请
                                </div>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="box-card1">
                        <template #header>
                            <div class="card-header">
                                <span style="font-weight: 700;font-size:20px;">待办事项</span>
                                <el-button class="button" text>更多</el-button>
                            </div>
                        </template>
                        <div v-for="o in 6" :key="o" class="text item item-text">
                            <div class="items">
                                <div class="icon">
                                    <el-icon size="25">
                                        <Document />
                                    </el-icon>
                                </div>
                                <div class="text">
                                    请假申请
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
            <div class="workRight">
                <div class="times">
                    <div class="time-date">1月11日，星期三 | 腊月二十</div>
                    <div class="time-s">
                        <span class="span">08</span> : <span class="span">21</span> : <span class="span">45</span>
                    </div>
                </div>
                <div>欢迎使用『xxx』OA协同办公平台</div>
                <div class="heads">
                    <img src="" alt="">
                    <div class="heads-name">
                        <span>陈一一</span>
                        <span>集团总公司/人力资源管理部/HR主管 </span>
                    </div>
                </div>
                <div>今日使用时长：0 小时 23 分</div>
            </div>
        </div>
        <div class="workTwo">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span style="font-weight: 700;font-size:20px;">快捷申请</span>
                        <el-button class="button" text>更多</el-button>
                    </div>
                </template>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="Date" width="180" />
                    <el-table-column prop="name" label="Name" width="180" />
                    <el-table-column prop="address" label="Address" />
                </el-table>
            </el-card>
            <el-card class="box-card1">
                <template #header>
                    <div class="card-header">
                        <span style="font-weight: 700;font-size:20px;">快捷申请</span>
                        <el-button class="button" text>更多</el-button>
                    </div>
                </template>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="Date" width="180" />
                    <el-table-column prop="name" label="Name" width="180" />
                    <el-table-column prop="address" label="Address" />
                </el-table>
            </el-card>
        </div>
        <div class="workThree">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span style="font-weight: 700;font-size:20px;">快捷申请</span>
                        <el-button class="button" text>更多</el-button>
                    </div>
                </template>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="Date" width="180" />
                    <el-table-column prop="name" label="Name" width="180" />
                    <el-table-column prop="address" label="Address" />
                </el-table>
            </el-card>
            <el-card class="box-card1">
                <template #header>
                    <div class="card-header">
                        <span style="font-weight: 700;font-size:20px;">快捷申请</span>
                        <el-button class="button" text>更多</el-button>
                    </div>
                </template>
                <div style="height: 300px">
                    <el-steps direction="vertical" >
                        <el-step title="Step 1" />
                        <el-step title="Step 2" />
                        <el-step title="Step 3" />
                    </el-steps>
                </div>
            </el-card>
        </div>
         <div class="workThree">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span style="font-weight: 700;font-size:20px;">快捷申请</span>
                        <el-button class="button" text>更多</el-button>
                    </div>
                </template>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="Date" width="180" />
                    <el-table-column prop="name" label="Name" width="180" />
                    <el-table-column prop="address" label="Address" />
                </el-table>
            </el-card>
            <el-card class="box-card1">
                <template #header>
                    <div class="card-header">
                        <span style="font-weight: 700;font-size:20px;">快捷申请</span>
                       <span>最近30天前十的活跃度</span>
                    </div>
                </template>
                <div style="width:400px;height:300px">
                    <dv-scroll-ranking-board :config="config" style="width:400px;height:300px" />
                </div>
            </el-card>
        </div>
        <div class="workFour">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span style="font-weight: 700;font-size:20px;">快捷申请</span>
                        <el-button class="button" text>更多</el-button>
                    </div>
                </template>
                <div ref="bar" style="width: 100%;height:400px;"></div>
            </el-card>
        </div>

    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from "vue";
let bar=ref(null)
// var chartDom = document.getElementById('main');
console.log(bar);
const config= ref({
    data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    }
  ],
  unit: '单位'
})
const barLine=()=>{
var myChart = echarts.init(bar.value);
var option;

option = {
  title: {
    text: 'Temperature Change in the Coming Week'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0],
      markPoint: {
        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
      },
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max'
              },
              type: 'max',
              name: '最高点'
            }
          ]
        ]
      }
    }
  ]
};

option && myChart.setOption(option);
}
onMounted(()=>{
    barLine()
})
// import navTitleVue from '../../components/navTitle.vue';
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

</script>

<style scoped lang="scss">
.workbench {
    max-width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    overflow: auto;
    .workTop {
        display: flex;
        justify-content: space-around;
        width: 1700px;
        .workLeft {
            width: 1200px;
            :deep(.statist) {
                width: 1200px;
                margin: 10px 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                text-align: center;

                .el-statistic {
                    background-color: #fff;
                    width: 150px;
                    padding: 20px 0;
                    border-right: 1px solid #ccc;

                    .el-statistic__head {
                        font-size: 16px;
                    }

                    .el-statistic__content {
                        .el-statistic__number {
                            color: #00d9d2;
                        }

                    }
                }
            }
            .word-card {
                display: flex;
                justify-content: space-between;
                padding: 0 20px;
                width: 1200px;

                .box-card {
                    width: 660px;

                    .card-header {
                        display: flex;
                        justify-content: space-between;
                    }

                    :deep(.el-card__body) {
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        align-items: center;

                        .item-text {
                            text-align: center;
                            width: 140px;

                            .items {
                                width: 140px;
                                height: 120px;

                                .icon {
                                    width: 100%;
                                    height: 70px;
                                    background-color: #f6f6f6;
                                    line-height: 70px;
                                }

                                .text {
                                    line-height: 50px;
                                }
                            }
                        }

                    }
                }

                .box-card1 {
                    width: 510px;

                    .card-header {
                        display: flex;
                        justify-content: space-between;
                    }

                    :deep(.el-card__body) {
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        align-items: center;

                        .item-text {
                            text-align: center;
                            width: 140px;

                            .items {
                                width: 140px;
                                height: 120px;

                                .icon {
                                    width: 100%;
                                    height: 70px;
                                    background-color: #f6f6f6;
                                    line-height: 70px;
                                }

                                .text {
                                    line-height: 50px;
                                }
                            }
                        }

                    }
                }
            }
        }
        .workRight {
            width: 450px;
            height: 240px;
            background-color: #fff;
            margin: 10px 0 0 10px;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .times {
                display: flex;

                .time-date {
                    color: #3974c4;
                }

                .time-s {
                    margin-left: 20px;

                    .span {
                        color: #fff;
                        display: inline-block;
                        padding: 3px;
                        background-color: #3974c4;
                        font-size: 13px;
                        border-radius: 2px;
                    }
                }
            }

            .heads {
                display: flex;

                img {
                    width: 50px;
                    height: 50px;
                }

                .heads-name {
                    margin-left: 20px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
            }
        }
    }
    .workTwo {
        width: 1700px;
        display: flex;
        justify-content: space-around;
        margin: 10px;
        .box-card {
            width: 660px;
            .card-header {
                display: flex;
                justify-content: space-between;
            }
           
        }
        .box-card1{
            width: 970px;
            .card-header {
                display: flex;
                justify-content: space-between;
            }
        }
    }
    .workThree{
        width: 1700px;
        display: flex;
        justify-content: space-around;
        margin: 10px;
        .box-card {
            width: 1160px;
            .card-header {
                display: flex;
                justify-content: space-between;
            } 
        }
        .box-card1{
            width: 456px;
            .card-header {
                display: flex;
                justify-content: space-between;
            } 
        }
    }
    .workFour{
        width: 1700px;
        .box-card {
            width: 100%;
            .card-header {
                display: flex;
                justify-content: space-between;
            } 
        }
    }
}
</style>